@charset "utf-8";
@import "mixin.scss";
body{
    background: #fff;
}
#header{
    height: r(88);
    padding: 0;
    background: #fff;
    text-align: left;
    box-shadow: none;
    .image{
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: r(88);
        height: r(88);
        text-align: center;
        .icon{
            display: inline-block;
            vertical-align: middle;
            width: r(36);
            height: r(36);
            margin-top: 50%;
            transform: translateY(-50%);
            @include bg-image('../images/back');
            background-repeat: no-repeat;
        }
    }
    .title{
        margin: 0;
        text-align: center;
        font-size: r(38);
        height: r(88);
        line-height: r(88);
    }
}

#main{
    text-align: center;
    background: #fff;
    padding:r(88) r(78);
    img{
        width: r(220);
        height: r(220);
        border-radius: 50%;
        margin: r(30) auto r(120);
    } 
    .group{
        position: relative;
        background: #fff;
        input{
            display: block;
            width: 100%;
            outline: 0;
            border: 0;
            font-size: r(36) !important;
            color: #333;
            border-bottom:0.04347rem solid #cfcfcf;
            &:nth-of-type(1){
                padding-bottom: r(30); 
            }
            &:nth-of-type(2){
                padding-top: r(60); 
                padding-bottom: r(30); 
            }
        }
        span{
            position: absolute;
            right: r(20);
            top: r(130);
            font-size: r(28);
            color: #CACACA;
        }
    } 
    button{
        display: block;
        margin:r(120) 0 r(26) 0;
        width: r(600);
        height: r(88);
        background: #fec93c;
        border: 0;
        outline: none;
        border-radius: r(10);
        font-size: r(36);
        cursor: pointer;
    }
    .left{
        float: left;
        color: #cacaca;
        font-size: r(28);
        cursor: pointer;
    }       
    .right{
        float: right;
        width: r(140);
        height: r(46);
        line-height: r(46);
        background: #eee;
        text-align: center;
        border-radius: r(20);
        color: #cacaca;
        font-size: r(28);   
        cursor: pointer;        
    }
    ul{
        overflow: hidden;
        width: r(347);
        margin:r(322) auto r(60);
        position: absolute;
        left: 50%;
        bottom: r(30);
        transform: translateX(-50%);
        li{
            float: left;
            list-style: none;
            width: r(58);
            height: r(58);
            border-radius: 50%;
            margin-right: r(85);
            text-align: center;
            &:nth-last-of-type(1){
                margin: 0;
            }
            a{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .qq{
            @include bg-image('../images/qq');                    
        }
        .sina{
            @include bg-image('../images/sina');
        }
        .wechat{
            @include bg-image('../images/wechat');
        }
    }     
}
